<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>模板语法</title>
		<!-- 引入Vue核心库 -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Vue的模板语法分为2大类：
					1.插值语法（简单）：
							功能：向标签体中指定位置插入数据。
							写法：{{xxx}}，xxx是js表达式，且可以自动读取到data中配置的所有属性。
					2.指令语法（复杂）：
							功能：用于解析标签（标签属性、标签体、绑定事件......）
							举例：v-bind:href = "xxx"，xxx是js表达式，且可以自动读取到data中配置的所有属性。
					3.备注：Vue中有很多的指令，形式都是v-???，此处我们只是拿v-bind举个例子。
		-->
		<!-- 准备一个容器 -->
		<div id="demo">
			<h1>插值语法</h1>
			<h2>你好，{{person.name}}</h2>
			<h2>你好，{{school.name}}</h2>
			<hr>
			<h1>指令语法</h1>
			<a 
				v-bind:href="school.url"
				x="school.msg"
				v-bind:y="school.msg"
				a="1+1"
				v-bind:b="1+1"
			>
				点我去{{school.name}}学习
			</a>
		</div>
		
		<script type="text/javascript" >
			// 关闭生产提示
			Vue.config.productionTip = false

			//创建Vue实例
			new Vue({
				el:'#demo',
				data:{
					person:{
						name:'jack',
						age:18
					},
					school:{
						name:'尚硅谷',
						url:'http://www.atguigu.com',
						msg:'welcome to atguigu'
					}
				}
			})
		</script>
	</body>
</html>